<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="query" class="input-with-select" style='width:300px'>
        <el-button slot="append" icon="el-icon-search" @click='searchUser'></el-button>
      </el-input>
      <!-- 添加用户 -->
      <el-button type="success" plain @click="dialogFormVisible = true">添加用户</el-button>
      <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="用户名" :label-width="formLabelWidth" prop='username'>
            <el-input v-model="form.username" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop='password'>
            <el-input v-model="form.password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop='email'>
            <el-input v-model="form.email" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth" prop='mobile'>
            <el-input v-model="form.mobile" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 表单 -->
    <el-table :data="usersData" border style="width: 100%;margin-top:15px">
      <!-- 列表序号 -->
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="username" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180">
      </el-table-column>
      <el-table-column prop="mobile" label="电话">
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <!-- 组件中的template能实现对应一行数据的绑定，它里面的scope属性中的row属性就是绑定当前一行的全部信息（用户名等信息） -->
          <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change='changeStatus(scope.row)'>
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip content="编辑" placement="top">
            <el-button type="primary" icon="el-icon-edit" @click="editUserlist(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button type="primary" icon="el-icon-delete" @click='deleteUser(scope.row.id)'></el-button>
          </el-tooltip>
          <el-tooltip content="授权角色" placement="top">
            <el-button type="primary" icon="el-icon-check" @click='grandUser(scope.row)'></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style='margin-top:15px;background-color:#d6d2d2'>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 编辑用户信息 -->
    <el-dialog title="编辑用户" :visible.sync="editdialogFormVisible">
      <el-form :model="editform" :rules="rules" ref="editform">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop='username'>
          <el-input v-model="editform.username" auto-complete="off" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop='email'>
          <el-input v-model="editform.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop='mobile'>
          <el-input v-model="editform.mobile" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitdeitForm('editform')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 授权用户信息 -->
    <el-dialog title="授权角色" :visible.sync="granddialogFormVisible">
      <el-form :model="grandform" :rules="rules" ref="grandform">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop='username'>
          <el-input v-model="grandform.username" auto-complete="off" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select v-model="grandform.rid" placeholder="请选择">
            <!--组件方法： v-model的值为当前被选中的el-option的:value 属性值 -->
            <!-- label动态绑定的就是角色名称 -->
            <el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="granddialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitgrandform('grandform')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入api接口
import {
  getalluseLis,
  addUser,
  editUser,
  deleteUser,
  changUserstatus,
  getroles,
  allotroles
} from '@/api/index.js'
export default {
  data () {
    return {
      // 授权角色
      rolesList: [],
      value: '',
      // 总页码
      total: 0,
      // 当前页码
      currentPage: 1,
      // 每页显示条数
      pagesize: 5,
      // 查询参数
      query: '',
      // users列表
      usersData: [],
      // 控制添加弹出框
      dialogFormVisible: false,
      // 添加用户信息
      form: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      formLabelWidth: '120px',
      // 添加用户的表单验证
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: 'blur,change'
          }
        ],
        mobile: [{ required: true, message: '电话不能为空' }]
      },
      // 编辑用户框显示
      editdialogFormVisible: false,
      // 编辑用户信息
      editform: {
        id: '',
        email: '',
        mobile: '',
        username: ''
      },
      // 授权角色
      granddialogFormVisible: false,
      // 授权角色信息
      grandform: {
        username: '',
        id: '',
        rid: ''
      }
    }
  },
  mounted () {
    getalluseLis({ query: '', pagenum: 1, pagesize: 5 }).then(res => {
      // console.log(res)
      // console.log(this.totalpage)
      // 获取users列表，赋值给data定义的usersData,通过prop=属性名关联，渲染页面
      this.usersData = res.data.users
      // 赋值总页数
      this.total = res.data.total
    })
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      // 获取当前每页显示多少条
      this.pagesize = val
      // 发送请求获取对应页码的数据--封装函数getusepage
      this.getusepage()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      // 获取当前点击的页数
      this.currentPage = val
      // 发送请求获取对应页码的数据--封装函数getusepage
      this.getusepage()
    },
    // 搜索功能
    searchUser () {
      // 获取搜索的参数
      // console.log(this.query)
      // 发送请求
      // 重置当前页面，防止当跳转到第二页的时候，搜索功能异常
      // 判断输入搜索内容是否为空
      if (this.query === '') {
        return false
      }
      this.currentPage = 1
      this.getusepage()
    },
    // 用户添加功能
    submitForm (form) {
      // validate：对整个表单进行校验的方法。若不传入回调函数，则会返回一个 promise
      this.$refs[form].validate(valid => {
        if (valid) {
          // console.log(this.form)
          addUser(this.form).then(res => {
            // console.log(res)
            // 判断是否添加成功
            if (res.meta.status === 201) {
              //  提示用户
              this.$message({
                message: res.meta.msg,
                type: 'success'
              })
              // 重置表单数据
              this.$refs[form].resetFields()
              // 关闭添加框
              this.dialogFormVisible = false
            } else {
              //  失败，提示用户
              this.$message({
                message: res.meta.msg,
                type: 'error'
              })
            }
          })
        } else {
          console.log('请输入合法')
          return false
        }
      })
    },
    // 显示编辑用户信息框
    editUserlist (row) {
      // 显示编辑框
      this.editdialogFormVisible = true
      // 将此列的用户信息渲染到表格
      // console.log(row)
      this.editform.id = row.id
      this.editform.username = row.username
      this.editform.email = row.email
      this.editform.mobile = row.mobile
    },
    // 编辑用户提交
    submitdeitForm (editform) {
      // 组件表单验证提交方法
      this.$refs[editform].validate(valid => {
        if (valid) {
          editUser(this.editform).then(res => {
            // console.log(res)
            // 判断是否添加成功
            if (res.meta.status === 200) {
              //  提示用户
              this.$message({
                message: res.meta.msg,
                type: 'success'
              })
              // 关闭添加框
              this.editdialogFormVisible = false
              // 刷新页面
              this.getusepage()
            } else {
              //  失败，提示用户
              this.$message({
                message: res.meta.msg,
                type: 'error'
              })
            }
          })
        } else {
          console.log('请输入合法')
          return false
        }
      })
    },
    // 删除单个用户
    deleteUser (id) {
      // 弹出用户删除提示框--使用反引号
      this.$confirm(`此操作将永久删除id号为${id}的用户, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 点击确认进行删除操作
          deleteUser(id).then(res => {
            // console.log(res)
            // 判断删除状态
            if (res.meta.status === 200) {
              //  提示用户
              this.$message({
                message: res.meta.msg,
                type: 'success'
              })
              // 刷新页面
              this.getusepage()
            } else {
              //  失败，提示用户
              this.$message({
                message: res.meta.msg,
                type: 'error'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 改变用户状态
    changeStatus (row) {
      // console.log(row)
      changUserstatus({ id: row.id, mg_state: row.mg_state }).then(res => {
        // console.log(res)
        // 判断状态是否修改成功
        if (res.meta.status === 200) {
          //  提示用户
          this.$message({
            message: res.meta.msg,
            type: 'success'
          })
          // 刷新页面
          this.getusepage()
        } else {
          //  失败，提示用户
          this.$message({
            message: res.meta.msg,
            type: 'error'
          })
        }
      })
    },
    // 授权角色显示
    grandUser (row) {
      // console.log(row)
      // 显示编辑框
      this.granddialogFormVisible = true
      // 渲染用户名
      this.grandform.username = row.username
      this.grandform.id = row.id
      getroles().then((res) => {
        // console.log(res)
        // 赋值角色列表显示
        this.rolesList = res.data
        // 赋值角色的id
        // this.grandform.rid = res.data.id
      })
    },
    // 授权角色提交
    submitgrandform (grandform) {
      this.$refs[grandform].validate(valid => {
        if (valid) {
          // 发送提交角色编辑请求
          allotroles(this.grandform).then((res) => {
            // console.log(res)
            // 判断是否添加成功
            if (res.meta.status === 200) {
              //  提示用户
              this.$message({
                message: res.meta.msg,
                type: 'success'
              })
              // 刷新页面
              this.getusepage()
            } else {
              //  失败，提示用户
              this.$message({
                message: res.meta.msg,
                type: 'error'
              })
            }
            // 关闭添加框
            this.granddialogFormVisible = false
          })
        } else {
          console.log('请输入合法')
          return false
        }
      })
    },
    // 封装对应页码数据函数
    getusepage () {
      // 发送请求
      getalluseLis({
        query: this.query,
        pagenum: this.currentPage,
        pagesize: this.pagesize
      }).then(res => {
        // console.log('当前页面' + this.currentPage)
        // console.log('每页显示' + this.pagesize)
        // 赋值总页数
        this.total = res.data.total
        // 获取users列表，赋值给data定义的usersData,通过prop=属性名关联，渲染页面
        this.usersData = res.data.users
        // console.log(res.data.users)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  background-color: #f5f5f5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
  margin-bottom: 15px;
}
</style>
